<template>
  <div class="page-user">
    <el-card>
      <!-- 控制面板 -->
      <el-row flex justify="space-between" style="margin-bottom: 16px">
        <div class="left">
          <!-- <el-button plain type="danger" :icon="Delete" @click="delPatchBills"
            >删除</el-button
          >   -->
          <el-button plain type="primary" :icon="Edit" @click="openEdit"
            >编辑</el-button
          >
        </div>
        <div class="right">
          <el-pagination
            v-model:current-page="paginationConfig.currentPage"
            v-model:page-size="paginationConfig.pageSize"
            layout="prev, pager, next"
            :page-count="paginationConfig.pageCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-row>
      <el-scrollbar max-height="600px">
        <el-table
          :data="tableConfig.data"
          border
          stripe
          v-loading="tableConfig.loading"
          element-loading-text="查询中..."
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            min-width="60"
            label="序号"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="管理员权限"
            prop="is_superuser"
            min-width="180"
          ></el-table-column>
          <el-table-column
            label="用户名称"
            prop="nick_name"
            min-width="80"
          ></el-table-column>
          <el-table-column
            label="联系方式"
            prop="telephone"
            min-width="80"
          ></el-table-column>
          <el-table-column
            label="头像"
            prop="head_img_url"
            min-width="80"
          ></el-table-column>

          <el-table-column
            label="生日"
            prop="birthday"
            min-width="80"
          ></el-table-column>
          <el-table-column
            label="账户类型"
            prop="user_type"
            min-width="80"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="created_at"
            min-width="180"
          ></el-table-column>

          <el-table-column
            label="总共充值"
            prop="total_recharge"
            min-width="150"
          ></el-table-column>

          <el-table-column
            label="余额"
            prop="remain_money"
            min-width="150"
          ></el-table-column>
        </el-table>
      </el-scrollbar>
    </el-card>
    <!-- 编辑用户信息 -->
    <el-dialog
      :title="dialogTitle"
      v-model="visible"
      width="475px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="beforeClose"
    >
      <el-form ref="ruleFormRef" :model="item" v-for="item in selectionList">
        <el-form-item label="用户名称" prop="name">
          <el-input
            v-model="item.nick_name"
            placeholder="长度不超过64个字符"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="item.telephone"></el-input
        ></el-form-item>
        <el-form-item label="用户类型">
          <el-select v-model:model-value="item.user_type">
            <el-option value="店长"> </el-option>
            <el-option value="游客"> </el-option> </el-select
        ></el-form-item>
        <el-form-item label="生日日期">
          <el-date-picker
            v-model="item.birthday"
            type="datetime"
            placeholder="请选择物用户生日"
            format="YYYY-MM-DD"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="editUsers">确定</el-button>
          <!-- <el-button @click="visible = false">取消</el-button> -->
          <el-button @click="beforeClose">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { getWxusers, updateWxusers } from "@/api/user";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import _ from "lodash";
import dayjs from "dayjs";

// 分页配置信息
const paginationConfig = reactive({
  currentPage: 1,
  pageSize: 30,
  pageCount: 1,
});
// 当分页大小改变
const handleSizeChange = (size: number) => {
  paginationConfig.pageSize = size;
  // getBillListByState(searchConf.state);
};
// 当页码改变
const handleCurrentChange = (page: number) => {
  paginationConfig.currentPage = page;
  // getBillListByState(searchConf.state);
};
// 弹窗配置
const dialogConfig = reactive({
  dialogTitle: "编辑用户",
  visible: false,
});
const { dialogTitle, visible } = toRefs(dialogConfig);
// 打开编辑
const openEdit = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning("请至少选择一项用户信息修改");
    return;
  } else {
    visible.value = true;
  }
};

// 批量选择
let selectionList = ref([] as UserType.WxUserInfo[]);
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val.map((item: any) => item);
  selectionList.value = val.map((item: any) => {
    return {
      uuid: item.uuid,
      nick_name: item.nick_name,
      telephone: item.telephone,
      user_type: item.user_type,
      birthday: item.birthday,
    };
  });
};

const tableConfig = reactive({
  label: "用户信息",
  loading: false,
  data: [] as any[],
});
// 查询用户
const getUsers = async () => {
  tableConfig.loading = true;
  let res = await getWxusers();
  if (res.status === 200) {
    let data = _.get(res, "data.data", []);
    tableConfig.data = data;
    ElMessage.success("查询成功");
  }
  tableConfig.loading = false;
};
// 批量修改用户信息
const editUsers = async () => {
  tableConfig.loading = true;
  selectionList.value.forEach((item) => {
    item.birthday = dayjs(item.birthday).format("YYYY-MM-DD");
  });
  let res = await updateWxusers({ list: selectionList.value });
  if (res.status === 200) {
    ElMessage.success("修改成功");
    visible.value = false
    getWxusers();
  }
  tableConfig.loading = false;
};
// 批量删除房屋
// const delPatchBills = () => {
//   tableConfig.loading = true;
//   if (multipleSelection.value.length === 0) {
//     ElMessage.warning("请至少选择一项删除");
//     tableConfig.loading = false;
//     return;
//   }
//   let list = multipleSelection.value.map((item: any) => {
//     return item.uuid;
//   });
//   deleteBills({ list: list })
//     .then(async (res) => {
//       if (res.status === 200) {
//         ElMessage.success("删除成功");
//         getAllBill();
//       }
//     })
//     .catch((err) => {
//       ElMessage.error("删除成功");
//       tableConfig.loading = false;
//     });
// };
// 关闭弹窗
const beforeClose = () => {
  visible.value = false;
};
onMounted(async () => {
  getUsers();
});
</script>

<style scoped>
.bill-search-button {
  padding: 5px;
}
</style>
